﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="thymeleaf" />
<title>thymeleaf</title>
<style type="text/css">
.trbgcolor {background: #DCDCDC;}
</style>
</head>
<body>

    <!-- 定义变量  -->
    <div th:with="first=123456上山打老虎">
       <p>
        the param local is :
	    <span th:text="${first}">Marcus Antonius</span>.
	  </p>
    </div>
    
    <p>Today is: <span th:text="${today}">13 february 2011</span>.</p>
    <p>Today is: <span th:text="${{todayStr}}">13 february 2011</span>.</p>
    <p>
     <!-- #calendars 使用#调用内嵌对象  -->
	  Today is: <span th:text="${#calendars.format(today,'dd MM yyyy')}">13 May 2011</span>
	</p>
	<p>In two years, it will be <span th:text="2017 + 2">1991</span>.</p>
    <h2 th:text="#{title.list}" th:class="trbgcolor">List of Seed Starters</h2>
	<!-- 字符串拼接  " '+''+'' "  或  " |  |"  | 内部字符串直接拼接 不需要+|-->
    <span th:text="'now is ' + ${#calendars.format(today,'dd MM yyyy : hh mm ss')}"></span>
    <span th:text="|now is, ${today}!|"></span>
    <br></br>
    <!-- 内联显示方式 -->
    <span>now is, [[${today}]]!</span>
    <!-- 使内联失效 -->
    <p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
    <div th:if="true == false">
         show me
    </div>
    
    <!-- <p th:text="${__#{text.pro('eshin')}__}">Some text here...</p> -->
    
	<table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;width: 98%;margin: 20px;">
		<thead>
			<tr style="height: 30px;background: #4682B4;">
			
			   <!--  #{table.no} 取resource文件中的值 -->
				<td style="width: 10%" th:text="#{table.no}">no</td>
				<td style="width: 10%" th:text="#{table.name}">name</td>
				<td style="width: 20%" th:text="#{table.mobile}">mobile</td>
				<td style="width: 20%" th:text="#{table.money}">money</td>
				<td style="width: 20%" th:text="#{table.time}">time</td>
				<td style="width: 20%" th:text="#{table.operate}">operate</td>
			</tr>
		</thead>
		<tbody th:if="${not #lists.isEmpty(items)}" >
		<!-- <tbody class="seedstarterlist" th:unless="${#lists.isEmpty(items)}"> -->
			<tr th:each="item,state:${items}" style="height: 25px;" th:class="${state.count%2==0}?'trbgcolor':''">
				<td th:text="${state.count}">count</td>
				<td th:switch="${item.name}">
					<lable th:case="'zhangsan'">yes</lable>
					<lable th:case="'lisi'">no</lable>
					<lable th:case="*">unknown</lable>
				</td>
				<td th:text="${#strings.isEmpty(item.mobile)?'--':item.mobile}">mobile</td>
				<td th:text="${#numbers.formatDecimal(item.money,1,2)}">money</td>
				<td th:text="${not #strings.isEmpty(item.createTime) and #strings.length(item.createTime) &gt; 10?#strings.substring(item.createTime,0,10):'--'}">createTime</td>
				<td><a th:href="@{/go/{id}/{name}(id=${item.id},name=${item.name})}">go</a></td>
			</tr>
		</tbody>
		
		<tfoot th:unless="${#lists.isEmpty(items)}">
			<tr style="height: 25px;">
				<td colspan="6" align="center">
					<div th:text="${#strings.append('zhangs',',hello!')}"></div>
					<!-- 如果th:remove中添加为真则显示链接，否则不能被点击 -->
					<a href="detail.html" th:remove="${not #lists.isEmpty(items)?tag:'none'}">view</a>
					<a th:href="@{/detail(id=${page.pageIndex})}">go</a><br></br>
					<a th:href="@{/go/{id}(id=${page.pageIndex}+${#calendars.format(today,'ss')})}">go</a><br></br>
					<a th:href="@{/go/{id}/name(id=${page.pageIndex})}">go</a><br></br>
				</td>	
			</tr>
		</tfoot>
	</table>
	
	<!-- <form action="#" <!-- th:attr="action=@{/go}  th:object="${page}" method="post"> -->
	<form action="#" th:action="@{/go}" th:object="${page}" method="post">
	   <input type="text" id="total" name="total" th:value="*{total}" />
	   <input type="text" id="pageSize" name="pageSize" th:value="*{pageSize}" />
	   <input type="text" id="pageIndex" name="pageIndex" th:value="*{pageIndex}" />
	   <input type="text" id="lastPage" name="lastPage" th:value="*{lastPage}? #{bool.true} : #{bool.false}">
	   <ul>
              <li th:each="feat,rowStat: ${allFeatures}">
                <input type="checkbox"  th:value="${feat}" th:field="*{features}"/>
                <label th:for="${#ids.prev('features')}"  th:text="${feat}+${rowStat.count}">Electric Heating</label>
              </li>
      </ul>
    </form>
    
    
    <!-- 嵌入footer.html的内容 --> 
	<div th:insert="~{footer :: copy}"></div>
	<div th:insert="footer :: copy"></div><!-- 等价 -->
	<!--  类似css的id选择器 -->
    <div th:insert="~{footer :: #copy-section}"></div>
    
    <div th:replace="footer::frag ('123','456')">...</div>
    
    
    <span>hello!</span>
        <!-- 该注释部分仍在页面显示 -->
		<!--/*/ 
		  <div th:text="${page.total}">
		    ...
		  </div>
		/*/-->
		<!-- 该部分将被清除 -->
		<!--/*--> 
		  <div>
		     you can see me only before Thymeleaf processes me!
		  </div>
		<!--*/-->
	<span>goodbye!</span>
    <!-- 一次性指定多个属性  -->
    <!-- <img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> -->
     
     
	<!-- double-brace syntax (${{...}}), 
	which will automatically apply the Spring Conversion Service, 
	including the DateFormatter we registered at configuration. -->
	
<!-- 	1.Message expression : #{}
		2.Variable expression : ${}
		3.Link URL expression: @{}
		4.Selection Variable expression: *{}
		结合th:object使用，在某个范围内进行变量的查找，而不是在context中查找，缩小了查询的范
		围如何没有与th:object结合使用，*{}与${}效果一样，因为其范围自动扩展到context。 -->
		

  <script th:inline="javascript">
	/*<![CDATA[*/
	    ...
	    var username = /*[[${page.total}]]*/ 'Amy Guo';
	    ...
	/*]]>*/
	
	</script>
  <script>
	/*[+
	
	var msg  = "Hello, " + [[${page.total}]];
	
	+]*/
  </script>
  <!--/*[[${page.total}]]*/在thymeleaf解释器解析代码时会解析里面的[[${page.total}]]
            加载静态页时会解析注释后面的语句 var username = 'Amy Guo';
     Tips: js内联代码中需要加入/*<![CDATA[*/    ......    /*]]>*/代码块，
     thymeleaf才能正确解析一些运算符(<等)和操作符号&/&&等。
     /*[+ ----  +]*/ 方式不需要声明th:inline="javascript"-->
</body>
</html>